<template>
    <div class="box">
        
        <div class="header">
          
            <el-button type="primary" :icon="Plus" solid @click="openDialog"> 添加网红小店</el-button>
        </div>

        
        <div class="content">
            
            <el-table :data="tableData" border style="width: 100%;">
               
                <el-table-column prop="name" label="名字" width="180" />
                
                <el-table-column prop="address" label="地址" />
              
                <el-table-column prop="url" label="小店图片">
                    
                    <template #default="scope">
                       
                        <img class="whxd-img" :src="scope.row.url[0]" alt="">
                    </template>
                </el-table-column>
                
                <el-table-column prop="label" label="小店标签">
                    <template #default="scope">
                       
                        <el-tag v-for="(item, index) in scope.row.label" :key="index" type="warning">{{ item }}</el-tag>
                    </template>
                </el-table-column>
                
                <el-table-column prop="businessHours" label="营业时间" />
                
                <el-table-column prop="label" label="操作">
                    <template #default="scope">
                        <el-button type="success" :icon="Edit" @click="openDialog('edit',scope.row)">修改</el-button>
                        <el-button type="danger" :icon="Delete" @click="deleteItem(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

       
        <el-dialog v-model="whxdVisible" :title="dialogType ==='add' ? '新增网红小店' : '编辑网红小店'" width="500" center>
            
            <el-form ref="ruleFormRef" style="max-width: 600px " :model="ruleForm" label-width="auto">
               
                <el-form-item label="小店名称" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
               
                <el-form-item label="店铺地址" prop="address">
                    <el-input v-model="ruleForm.address" type="textarea" />
                </el-form-item>
                
                <el-form-item label="营业时间" prop="businessHours">
                    <el-time-select v-model="ruleForm.startTime" style="width: 140px" max-time="ruleForm.endTime"
                        placeholder="开始时间" start="00:00" step="00:30" end="23:59" />
                    <el-time-select v-model="ruleForm.endTime" style="width: 140px" min-time="ruleForm.starTime"
                        placeholder="结束时间" start="00:00" step="00:30" end="23:59" />
                </el-form-item>
                
                <el-form-item label="店铺标签" prop="label">
                    <el-input v-model="ruleForm.label" placeholder="请输入标签" aria-label="请输入后敲击回车" />
                </el-form-item>
                
                <el-form-item label="店铺介绍" prop="remark">
                    <el-input v-model="ruleForm.remark" type="textarea" />
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        保存
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>

import { Edit, Plus, Delete } from "@element-plus/icons-vue";

import data from "@/utils/data";

import { ref, onMounted } from "vue";


const tableData = ref(data);

console.log(data, 'data');


const whxdVisible = ref(false);


const ruleFormRef = ref()
console.log('ruleFormRef',ruleFormRef.value);

const dialogType = ref('add')

const ruleForm = ref({
    name: '',          
    address: '',       
    startTime: '',     
    endTime: '',       
    urlList: [],       
    label: [],         
})

const whxdId = ref(null)


const openDialog = (type,row) => {
   ruleForm.value={
    name: '',          
    address: '',      
    startTime: '',      
    endTime: '',       
    urlList: [],       
    label: [],  
   }

 whxdVisible.value = true;
 console.log('type----', type);
 console.log('row----', row);
 if (type=='edit') {
    dialogType.value='edit'
    ruleForm.value={...row}
    ruleForm.value.startTime=row.businessHours.split('-')[0]
    ruleForm.value.endTime=row.businessHours.split('-')[1]
    whxdId.value=row.id
 }else{
    dialogType.value='add'
    whxdId.value=null
 }
 
}




onMounted(() => {
  
    const savadData = localStorage.getItem('whxdData')
    
    if (savadData) {
        tableData.value = JSON.parse(savadData)
    } else {
        tableData.value = data
    }
}
)

const deleteItem = (index) => {
    tableData.value.splice(index, 1)
    localStorage.setItem('whxdData', JSON.stringify(tableData.value))
}

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit');
            console.log(ruleForm.value); 

            const maxId = tableData.value.length > 0
                ? Math.max(...tableData.value.map(item => item.id || 0))
                : 0
                if(whxdId.value){
                   const index=tableData.value[index]={
                    id:whxdId.value,
                    name:ruleForm.value.name,
                    address:ruleForm.value.address,
                    businessHours:`${ruleForm.value.startTime || ''} -${ruleForm.value.endTime || ''}`,
                    url:ruleForm.value.url || [],
                    label:ruleForm.value.label || [],
                   } 
                }else{
                    tableData.value.push({
                        id:maxId + 1,
                        name:ruleForm.value.name,
                        address:ruleForm.value.address,
                        businessHours:`${ruleForm.value.startTime || ''} -${ruleForm.value.endTime || ''}`,
                        url:ruleForm.value.url || [],
                        label:ruleForm.value.label || [],
                    })
                }
            localStorage.setItem('whxdData', JSON.stringify(tableData.value))
            ruleForm.value = {
                name: '',
                address: '',
                startTime: '',
                endTime: '',
                urlList: [],
                label: [],
            }
            whxdVisible.value=false
        } else {
            console.log('error submint!',fields);
        }
    })
}
</script>
<style scoped lang="scss">
.box {
    padding: 20px;
    .header {
        display: flex;
        justify-content: flex-end;
    }
    .content {
        margin-top: 20px;
        .whxd-img {
            height: 100px;
            width: 100px;
        }
    }
}
</style>